<template>
  <div class="shopping-cart fix-all" v-gesture:tap.stop.prevent="cancelShoppingCart()" id="shopping_cart">
    <div class="cart-content actionsheet" id="cart_actionsheet" v-gesture:tap.stop.prevent="doNothing()">

      <dl class="cart-dl">
        <dt class="md-padding text-default">
          <span>购物车</span>
          <span class="inventory-delete" @touchstart.stop.prevent="emptyCart()"><i class="iconfont icon-cart-delete"></i>清空</span>
        </dt>
        <div class="cart-dl-content" id="cart_dl_content">
          <div class="cart-dl-scroll">
            <dd class="md-padding text-default layout-row" v-for='item in cart.items'>
              <div class="item-l layout-flex layout-column layout-center" v-gesture:tap.stop.prevent="showInventoryGroup(item)">
                <p class="item-p-title">
                  <span class="text-accent item-title vm">{{item.inventoryName}}</span>
                  <!-- <span v-if="item.modifiers"><span v-for="modifier in item.modifiers.items" class="vm"><span  v-for="option in modifier.options" v-if="modifier.options.length!=0" class="">{{option.name}}</span></span></span> -->
                  <span v-if="item.modifiers"><span v-for="modifier in item.modifiers.items"><span v-for="option in modifier.options" v-if="modifier.options.length!=0" class="item-info">{{option.name}}</span></span></span>
                </p>
                <p class="text-muted text-color-info item-p-info ell">{{item.extended.description}}</p>
              </div>
              <div class="item-r layout-row layout-center">
                  <span class="text-color-accent text-accent">￥{{item.amount}}</span>
                  <div class="item-rr">
                    <i v-bind:class="['iconfont', item.qty>1 ? 'icon-inventory-subtract' : 'icon-inventory-delete']" @touchstart.stop.prevent="subtrackInventory($index)"></i>
                    <span class="inventory-count">{{item.qty}}</span>
                    <i class="iconfont icon-inventory-add" @touchstart.stop.prevent="increaseInventory($index)"></i>
                  </div>
              <div>
            </dd>
          <div>
        <div>
      </dl>

    </div>
    <!-- 商品选项 -->
    <inventory-option-group v-if="inventoryOptionGroupOption.show" :cart.sync='cart' :inventory-option-group.sync="inventoryOptionGroupOption"></inventory-option-group>
    <!-- 备注 -->
    <dialog v-if="askDialog" type="confirm" title="清空购物车" confirm-button="确定" cancel-button="取消" @weui-dialog-confirm="handleDialogAction('确认', 1)" @weui-dialog-cancel="handleDialogAction('取消', 2)"></dialog>

  </div>
</template>

<style lang='sass'>
  @import '../assets/sass/global/themes.scss';
  .shopping-cart{position: fixed;bottom: 50px;left: 0;top: 0;right: 0;background: rgba(0, 0, 0, 0.4);overflow: hidden;}
  .shopping-cart .cart-content{position: absolute;bottom: 0;background: white;width: 100%;}
  /*animation:mymove 5s infinite;*/
  @keyframes actionsheet{from {transform:translate(0, 100%);} to {transform:translate(0, 0)}}
  .shopping-cart .cart-content.actionsheet{animation:actionsheet 0.3s;}
  @keyframes actionsheet_toggle{from {transform:translate(0, 0);} to {transform:translate(0, 100%)}}
  .shopping-cart .cart-content.actionsheet_toggle{animation:actionsheet_toggle 0.3s;}
  .shopping-cart .cart-content .inventory-delete{color:$font-color-muted;font-size: $font-size-default;float: right;}
  .shopping-cart .cart-content .cart-dl-content{overflow-y: scroll;width: 100%}

  /*weui*/
  .shopping-cart .weui_dialog_confirm .weui_dialog_ft a:after,.weui_dialog_ft:after{display: none;}
  .shopping-cart .weui_dialog_confirm .weui_dialog_ft a{margin: 10px;border:1px solid #e2e2e2;border-radius: 5px;margin-bottom: 21px;}
  .shopping-cart .weui_dialog_confirm .weui_dialog_ft a.default{}
  .shopping-cart .weui_dialog_confirm .weui_dialog_ft a.primary{color: white;background-color: $bg-color-primary;}


  /*.cart-dl dd .item-p-info{padding-top: 6px}*/
  .cart-dl dt{line-height: 40px;background: $bg-color-deafult;padding: 0 15px;}
  .cart-dl dd{border-bottom: 1px solid #e3e3e3;width: 100%;padding: 12px 15px;}
  .cart-dl dd .item-l{overflow: hidden;margin-right: 5px;}
  .cart-dl dd .item-l .item-title{padding-right:2px;font-size: 14px;}
  .cart-dl dd .item-l .item-p-title{white-space: nowrap;}
  .cart-dl dd .item-l .item-info{border: 1px solid $font-color-primary;border-radius: 15%;margin-left: 6px;padding: 1px 3px 1px 3px;color: $bg-color-primary;font-size: 9px;vertical-align:middle;}
  .cart-dl dd .item-r .item-rr{right: 0;top:45px;line-height: 30px;right: .30666rem;padding-left: 20px}
  .cart-dl dd .item-r .item-rr > i {color:$font-color-primary;font-size: 30px;vertical-align: middle}
  .cart-dl dd .item-r .item-rr .inventory-count{width: 25px;display: inline-block;text-align: center;vertical-align: middle}
</style>

<script type="text/javascript">
export default{
  ready: function(){
    // debugger
    document.getElementById('cart_dl_content').style.maxHeight = (document.getElementById('shopping_cart').offsetHeight - 40 - 80) + 'px';
  },
  props:{
    cart:{
      type:Object,
      required:true
    },
    isShowShoppingCart: {
      required: true
    }
  },
  data: function(){
    return {
      askDialog: false,
      inventoryOptionGroup: this.$parent.inventoryOptionGroup,
      inventoryOptionGroupOption: {
        show:false,
        inventory:{},
        inventoryItem:{}
      }
    }
  },
  methods: {
    emptyCart: function(){
      // debugger
      this.askDialog = true;
    },
    subtrackInventory:function(cartItemsIndex){
      // debugger
      this.cart.decreaseInventoryInInventoryitem(cartItemsIndex);
      if(!this.cart.qty){
        this.isShowShoppingCart = false;
      }
    },
    increaseInventory:function(cartItemsIndex){
      this.cart.increaseInventoryInInventoryitem(cartItemsIndex);
    },
    doNothing: function(){},
    cancelShoppingCart: function(){
      if(this.askDialog){
        this.askDialog = false;
      } else {
        this.isShowShoppingCart = false;
      }
    },
    //dialog
    handleDialogAction(action, id) {
      if (id === 1) {
        this.cart.emptyCart();
        this.isShowShoppingCart = false;
      }
      this.askDialog = false;
    },
    showInventoryGroup:function(inventoryitem){
      this.inventoryOptionGroup.inventory.oldModifiers = inventoryitem.oldModifiers;
      this.inventoryOptionGroup.show=true;
      this.inventoryOptionGroup.inventoryItem = inventoryitem;
    }
  },
  components:{
    'dialog': require('../components/dialog/dialog'),
    'inventory-option-group': require('./inventory-option-group')
  }
}
</script>
